'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Modal,
    TouchableNativeFeedback,
     TextInput,
} from 'react-native';
import * as Color from "../../constant/Color";

/** 输入弹出框 */
export default class InputModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,    // 输入框可见性
            title: props.title,     // 输入框标题
            info: props.info,       // 一些提示信息
            text: props.text,       // 输入框输入的值
        }
    }

    render() {
        let modalBackgroundStyle = { backgroundColor: 'rgba(0, 0, 0, 0.5)', };

        if(this.state.modalVisible){
            return (
                <Modal
                    animationType   = {'fade'}
                    transparent     = {true}
                    visible         = {this.state.modalVisible}
                    onRequestClose  = {() => this.setModalVisible(false)}>

                    <View style={[styles.modal, modalBackgroundStyle]}>
                        <View style={styles.container}>
                            <View style={styles.titleView}>
                                <Text style={styles.titleText}>{this.state.title}</Text>
                            </View>

                            <Text style={styles.titleInfo}>{this.state.info}</Text>

                            <TextInput style={styles.inputView} onChangeText={(text) => this.setState({text: text})} underlineColorAndroid='transparent' value={this.state.text}/>

                            <View style={styles.buttonView} >
                                <TouchableNativeFeedback
                                    background={TouchableNativeFeedback.SelectableBackground()}
                                    onPress={() => this._doCancel()}>
                                    <View style={styles.buttonItemView}>
                                        <Text style={styles.btnText}>取消</Text>
                                    </View>
                                </TouchableNativeFeedback>

                                <View style={styles.divide}/>

                                <TouchableNativeFeedback
                                    background={TouchableNativeFeedback.SelectableBackground()}
                                    onPress={() => this._doSubmit()}>
                                    <View style={styles.buttonItemView}>
                                        <Text style={styles.btnText}>确定</Text>
                                    </View>
                                </TouchableNativeFeedback>
                            </View>
                        </View>
                    </View>
                </Modal>
            );
        }
        else return <View/>
    }

    mPressFuc(){};                // 点击方法回调

    /** 点击取消 */
    _doCancel(){
        this.setModalVisible(false);
    }

    /** 点击确定 */
    _doSubmit(){
        if(!this.mPressFuc) return;
        let text = this.state.text;
        if(!text) return;
        this.mPressFuc(text);
        this.setModalVisible(false);
    }

    /** 控制是否显示 */
    setModalVisible = (visible:boolean) => {
        this.setState({modalVisible: visible});
    };

    /** 设置标题与初始数据,并显示 */
    setDatasAndShow = (title:string, info:string, defaultValue:string, onPress:Function) => {
        if(onPress) this.mPressFuc = onPress;
        this.setState({
            title:title ? title : '',
            info:info ? info : '',
            text: defaultValue ? defaultValue : '',
            modalVisible: true
        });
    };
}

//样式定义
const styles = StyleSheet.create({
    modal: {
        flex: 1,
        flexDirection:'column',
        justifyContent: 'flex-end',
        // alignItems: 'center',
    },
    container: {
        justifyContent: 'flex-end',
        backgroundColor:Color.windowWhite,
        borderRadius:5,
        margin:4,
    },
    titleView:{
        padding:12,
        borderColor: Color.lightGray,
        borderBottomWidth:0.5,
        alignItems:'flex-start',
        justifyContent: 'center',
    },
    titleText:{
        fontSize:20,
        color:Color.darkGray,
    },
    titleInfo:{
        fontSize:14,
        color:Color.gray,
        margin:12,
    },
    inputView:{
        margin:12,
        fontSize:14,
        borderColor: Color.colorPrimary,
        borderRadius:3,
        borderWidth:1,
        paddingTop:5,
        paddingBottom:5,
    },
    containerItemText:{
        fontSize:17,
        color:'#3bd729',
    },
    buttonView:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'center',
        borderColor: Color.lightGray,
        borderTopWidth:0.5,
    },
    buttonItemView:{
        flex:1,
        height:45,
        alignItems:'center',
        justifyContent: 'center',
    },
    divide:{
        width:1,
        height:30,
        backgroundColor:Color.lightGray,
    },
    btnText:{
        fontSize:16,
        color:Color.colorPrimary,
    },
});

